<template>
  <div class="spatialQuery" :id="barShow ? 'bar-show' : 'bar'">
    <!-- 点选查询 -->
    <div
      class="pointQuery"
      v-show="barShow"
      @mouseover="pointHovered = true"
      @mouseleave="pointHovered = false"
      @click="pointQuery"
    >
      <div
        class="buttonBg"
        :style="{
          width: pointHovered || pointQueryOn ? '100%' : '0%',
        }"
      ></div>
      <img
        :src="
          require('@/assets/images/icon/toolBar/点标绘' +
            (pointHovered || pointQueryOn ? '-开启' : '') +
            '.png')
        "
      />
      <span
        :style="{
          color: pointHovered || pointQueryOn ? 'white' : '',
        }"
        >中心点查询</span
      >
    </div>
    <div class="bar" v-show="barShow"></div>
    <!-- 四边形查询 -->
    <div
      class="polygonQuery"
      v-show="barShow"
      @mouseover="rectangularHovered = true"
      @mouseleave="rectangularHovered = false"
      @click="rectangularQuery"
    >
      <div
        class="buttonBg"
        :style="{
          width: rectangularHovered || rectangularQueryOn ? '100%' : '0%',
        }"
      ></div>
      <img
        :src="
          require('@/assets/images/icon/toolBar/面标绘' +
            (rectangularHovered || rectangularQueryOn ? '-开启' : '') +
            '.png')
        "
      />
      <span
        :style="{
          color: rectangularHovered || rectangularQueryOn ? 'white' : '',
        }"
        >四边形查询</span
      >
    </div>
    <div class="bar" v-show="barShow"></div>
    <!-- 多边形查询 -->
    <div
      class="polygonQuery"
      v-show="barShow"
      @mouseover="polygonHovered = true"
      @mouseleave="polygonHovered = false"
      @click="polygonQuery"
    >
      <div
        class="buttonBg"
        :style="{
          width: polygonHovered || polygonQueryOn ? '100%' : '0%',
        }"
      ></div>
      <img
        :src="
          require('@/assets/images/icon/toolBar/多边形查询' +
            (polygonHovered || polygonQueryOn ? '-开启' : '') +
            '.png')
        "
      />
      <span
        :style="{
          color: polygonHovered || polygonQueryOn ? 'white' : '',
        }"
        >多边形查询</span
      >
    </div>
    <div class="bar" v-show="barShow"></div>
    <!-- 套索查询 -->
    <div
      class="mouseQuery"
      v-show="barShow"
      @mouseover="mouseHovered = true"
      @mouseleave="mouseHovered = false"
      @click="mouseQuery"
    >
      <div
        class="buttonBg"
        :style="{
          width: mouseHovered || mouseQueryOn ? '100%' : '0%',
        }"
      ></div>
      <img
        :src="
          require('@/assets/images/icon/toolBar/曲线' +
            (mouseHovered || mouseQueryOn ? '-开启' : '') +
            '.png')
        "
      />
      <span
        :style="{
          color: mouseHovered || mouseQueryOn ? 'white' : '',
        }"
        >套索面查询</span
      >
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "vue";

export default {
  name: "空间查询",
  data() {
    return {
      subList: [],
      barShow: false,
      pointHovered: false,
      polygonHovered: false,
      rectangularHovered: false,
      mouseHovered: false,
      pointQueryOn: false,
      polygonQueryOn: false,
      rectangularQueryOn: false,
      mouseQueryOn: false,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      subscribeList();
    });

    // pubsub订阅列表
    function subscribeList() {
      proxy.subList.push(
        // 显隐控制
        pubsub.subscribe("spatialQueryShowControll", (n, data) => {
          proxy.barShow = data;
        })
      );
    }

    // 点选查询
    function pointQuery() {
      // 单一功能检测
      !proxy.pointQueryOn && singleFunctionCheck();
      // 样式调整
      proxy.pointQueryOn = !proxy.pointQueryOn;
      // 功能执行
      pubsub.publish("pointQuery", proxy.pointQueryOn);
    }

    // 正方形查询
    function rectangularQuery() {
      // 单一功能检测
      !proxy.rectangularQueryOn && singleFunctionCheck();
      // 样式调整
      proxy.rectangularQueryOn = !proxy.rectangularQueryOn;
      // 功能执行
      pubsub.publish("rectangularQuery", proxy.rectangularQueryOn);
    }

    // 多边形查询
    function polygonQuery() {
      // 单一功能检测
      !proxy.polygonQueryOn && singleFunctionCheck();
      // 样式调整
      proxy.polygonQueryOn = !proxy.polygonQueryOn;
      // 功能执行
      pubsub.publish("polygonQuery", proxy.polygonQueryOn);
    }

    // 鼠标绘制查询
    function mouseQuery() {
      // 单一功能检测
      !proxy.mouseQueryOn && singleFunctionCheck();
      // 样式调整
      proxy.mouseQueryOn = !proxy.mouseQueryOn;
      // 功能执行
      pubsub.publish("mouseQuery", proxy.mouseQueryOn);
    }

    // 仅支持单一功能运行
    function singleFunctionCheck() {
      if (proxy.pointQueryOn) {
        proxy.pointQueryOn = !proxy.pointQueryOn;
        pubsub.publish("pointQuery", proxy.pointQueryOn);
      } else if (proxy.rectangularQueryOn) {
        proxy.rectangularQueryOn = !proxy.rectangularQueryOn;
        pubsub.publish("rectangularQuery", proxy.rectangularQueryOn);
      } else if (proxy.polygonQueryOn) {
        proxy.polygonQueryOn = !proxy.polygonQueryOn;
        pubsub.publish("polygonQuery", proxy.polygonQueryOn);
      } else if (proxy.mouseQueryOn) {
        proxy.mouseQueryOn = !proxy.mouseQueryOn;
        pubsub.publish("mouseQuery", proxy.mouseQueryOn);
      }
    }

    return { pointQuery, rectangularQuery, polygonQuery, mouseQuery };
  },
};
</script>

<style lang="less" scoped>
.spatialQuery {
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease;
  overflow: hidden;
  > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: 4px 3px;
    position: relative;
    overflow: hidden;
    min-width: 100px;
    > * {
      margin: 0 3px;
    }
    > img {
      width: 20px;
      transform: scale(1);
      transition: transform 0.3s ease;
    }
    > span {
      z-index: 999;
      // min-width: 75px;
      min-width: 80px;
    }
    > .buttonBg {
      margin: 0;
      background-color: #3f69e4;
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
      transition: width 0.3s ease;
    }
  }
  > div:hover {
    color: white;
    cursor: pointer;
  }
  > div:hover > img {
    transform: scale(1.2);
  }
  > div:hover > .buttonBg {
    width: 100%;
  }
  .bar {
    background-color: #3f69e4;
    width: 1px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    min-width: 1px;
  }
}

#bar-show {
  width: 500px;
  padding: 2px 5px;
}

#bar {
  width: 0px;
}
</style>